<template>
  <div>obj数据： {{ obj.name }}, {{ obj.count }}</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

const obj = reactive({ count: 10, name: '测试' });

// watch 在监听对象的时候，新旧是一样的，是因为js的底层，对象在内存里面储存的时候
// 地址在栈里面，值的引用在堆里面。 所以watch的新旧值，针对的对象都是一个地址，所以新旧都是一样
// watch(obj, (newObj, oldObj) => {
//   console.log('值', newObj === oldObj);
//   console.log('具体的值：', newObj.count, oldObj.count);
// });

watch(
  () => obj.count,
  (newObj, oldObj) => {
    console.log('值', newObj === oldObj);
    console.log('具体的值：', newObj, oldObj);
  }
);

setTimeout(() => {
  obj.count++;
}, 3000);
</script>
